<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    <script src="https://unpkg.com/konva@9/konva.min.js"></script>-->
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            height: 100%;
            width: 100%;
        }

        canvas {
            margin: 0;
            padding: 0;
            display: block;
            background: #D6F8FF;
        }
    </style>
</head>
<body>
<div style="line-height: 50px">
    <button onclick="ceshi()">添加</button>
    <button onclick="suofang(true)">缩小</button>
    <button onclick="suofang(false)">放大</button>

</div>
<div id="container"
     style="background-color: #D6F8FF;display: flex;justify-content: center;"></div>
<script src="./konva.js"></script>
<script src="./config.js"></script>
<script>
    let stage;
    let layer1;
    let layer2;
    let layer3;
    let layer2Scale = 1;
    window.onload = function init() {
        // stage = new Konva.Stage({container: 'container', width: window.innerWidth, height: window.innerHeight,});
        stage = new Konva.Stage({container: 'container', width: 800, height: 600});

        layer1 = new Konva.Layer({name: "ui", isUI: true});
        layer2 = new Konva.Layer({name: "grid", isUI: false, draggable: true});
        layer3 = new Konva.Layer({name: "data", isUI: false});
        stage.add(layer1);
        stage.add(layer2);
        stage.add(layer3);
        // window.addEventListener('resize', () => {
        //     stage.width(window.innerWidth);
        //     stage.height(window.innerHeight);
        // });
        // for (let i = 0; i < stage.children.length; i++) {
        //     const item = stage.children[i]
        //     if (item.attrs.isUI) continue;
        //     const tools = newGroup(15, 15 + i * 35, item.attrs.name);
        //     tools.on("click", (e) => {
        //         const name = e.target.parent.attrs.name;
        //         const index = stage.children.findIndex(item => item.attrs.name === name);
        //         stage.children[index].moveUp();
        //
        //     })
        //     tools.add(newRect())
        //     tools.add(newText(item.attrs.name))
        //     layer1.add(tools)
        // }
        var rect1 = new Konva.Rect({
            x: 0,
            y: 0,
            width: 800, // 宽度
            height: 600, // 高度
            fill: 'red', // 填充颜色
            stroke: 'black', // 描边颜色
            strokeWidth: 0 // 边框的宽度
        });
        layer1.add(rect1);


        var cellSize = 80; // 单元格大小
        var numRows = 21; // 行数
        var numCols = 30; // 列数

        for (var row = 0; row < numRows; row++) {
            for (var col = 0; col < numCols; col++) {
                var cell = new Konva.Rect({
                    x: col * cellSize,
                    y: row * cellSize,
                    width: cellSize,
                    height: cellSize,
                    stroke: 'black',
                    strokeWidth: 1
                });
                cell.on("click", (e) => {
                    // e.target.width(20)
                    e.target.fill("#fffaaa");
                })
                layer2.add(cell);
            }
        }

        const rect = new Konva.Rect({     //创建一个矩形
            x: 150,
            y: 100,
            width: 120,                 //矩形的宽度
            height: 30,                //矩形高度
            fill: 'gold',               //矩形填充的颜色
            stroke: 'navy',             //矩形描边的颜色
            strokeWidth: 2,             //填充宽度
            opactity: .2,               //矩形的透明度
            cornerRadius: 10,           //圆角的大小（像素）
            id: 'rect1',                //id属性，类似dom的id属性
            name: 'rect', //
            draggable: true             //是否可以进行拖拽
        });

        layer3.add(rect);

    };

</script>
</body>
</html>
